<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>Title</title>
    <script type="text/javascript" src="vue.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in message">
            <h1 v-if="item.id > 2">Yes</h1>
            <h1 v-else>{{item.id}}</h1>
        </li>
    </ul>
</div>
<test-app :list="message"></test-app>
<template id="tmps">
    <li v-for="item in message">{{item.type}}</li>
</template>
<script type="text/javascript">
    Vue.component('test-app',{
        template:'#tmps',
        props:['list'],
        data:function () {
           return {
               message:[
                   {id:1,type:'eat'},
                   {id:2,type:'drak'},
                   {id:3,type:'sleep'},
               ],
           }
        }
    });
    new Vue({
        el:'#app',
        data:{
            message:[
                {id:1,type:'eat'},
                {id:2,type:'drak'},
                {id:3,type:'sleep'},
            ],
        }
    })
</script>
</body>
</html>